<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport">
    <title>快豆明细</title>
    <link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/account.css?t=1.1">
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/reset.js"></script>

</head>
<body>
    <div id="app">
        <div class="wrap">
				<!-- 添加stick变固定定位-->
            <div class="center title stick">
				<div class="left fontc" v-on:click="chooseMonth">
					{{monthFmt}}<img src="./img/detail-down.png" alt="">
					<input type="hidden" id="hidden_value" :data-options="dateOpt"/>
				</div>
				<div class="right" style="color: #797B7B;">展示近1年的明细</div>
            </div>
            <!-- 空页面 --> 
	        <div v-if="no_data" class="empty">
	            <div class="cover">
	                <img src="./img/icon-search.png" alt="">
	            </div>
	            <p class="fontc-gray font-min">您还没有兑换记录</p>
	            <!-- <a href="index.html" class="btn btn-linner-bgc">现在去看看</a> -->
	        </div>
	        <!-- 有数据的页面 --> 
            <div v-else class="list ml mr mt br">
                <div class="item center" v-for="detail in account_datas">
                    <div class="left">
                       <p class="name">{{detail.content}}</p>
                       <p class="fontc-gray font-min">{{detail.time}}</p>
                    </div>
                    <div class="right" v-bind:class="{fontc:detail.type==2}"><span v-if="detail.type==1">+</span>{{detail.value}}</div>
                </div>
			</div>
        </div>
		<!-- 回到首页 -->
		<a href="./index.html" class="home btn-linner-bgc"><img src="./img/home.png" alt=""><span>首页</span></a>
		
    </div>

<script src="js/fmt.time.js"></script>
<script src="js/jquery.date.js?t=1"></script>
<script>
var vm = new Vue({
	el:'#app',
	data:{
		dateOpt: "",
		month: '2021-04',
		monthFmt: '',
		no_data: false,
		account_datas: [],
    },
    methods:{
    	chooseMonth(){
    		$("#hidden_value").click();
    	}
    }
});

init();
function init(){
	var month = nowMonth();
	var dateArray = month.split("-");
	var dateOpt = "{'callback':'pickCallFunc','type':'YYYY-MM','beginYear':2021, 'beginMonth':3, ";
	dateOpt += "'endYear':"+parseInt(dateArray[0])+", 'endMonth':"+parseInt(dateArray[1])+"}";
	vm.dateOpt = dateOpt;
	vm.month = month;
	$.date('#hidden_value');
	formatMonth();
	
	queryList();
}
//日期
function pickCallFunc(month){
	if(month==vm.month){
		return;
	}
	vm.month = month;
	formatMonth();
	queryList();
}
function formatMonth(){
	var array = vm.month.split("-");
	var str = array[0]+"年"+array[1]+"月";
	vm.monthFmt = str;
}

function queryList(){
	$.post("../api/account/detail", {"token":localStorage.getItem("token"), "month": vm.month}, function(data){
		if(data.retCode){
			var page = data.result;
			if(page.count<=0){
				vm.no_data = true;
			}else{
				vm.no_data = false;
				vm.account_datas = page.data;
			}
		}
	});
}

</script>
</body>
</html>